import BaseGroup from '@/components/js/BaseGroup'
import { MOBILE_WID_HEI } from '@/common/const-dif'
import { EventBus } from '@/store/index'
import { isHasOwnProperty } from '@/plugins/utils'
export default class TwistedEgg extends BaseGroup {
  constructor() {
    super();
    //子类覆盖
    this.className = "twisted-egg";
    this.ball = []
    this.position = []
    this.gsap = null
  }

  start() {
    if(window.MotionPathPlugin){
      window.gsap.registerPlugin(window.MotionPathPlugin);
    }
    // 扭蛋机 2276
    // {
    //   "bgCompId": "2fc49569-0a98-47cf-be89-de7726b90f2c",
    //   "pathNum":4
    //   "gsap": {
    //     "isBezier": true,
    //     "time": 2,
    //     "duration": 1,
    //     "repeat": 2
    //   }
    // }
    let bgCompId = this.item.interactionData && this.item.interactionData.injectJsClassObj.bgCompId
    this.gsap = this.item.interactionData && this.item.interactionData.injectJsClassObj.gsap
    let num = this.item.interactionData && this.item.interactionData.injectJsClassObj.pathNum || 4
    let width = this.componentMap[bgCompId].conAttr.width / 2

    _.forEach(this.components, (component) => {
      if(component.conAttr.width < this.componentMap[bgCompId].conAttr.width){
        let dom = document.getElementById(component.id)
        dom.classList.add(this.className);
        let path = []
        let radio = component.conAttr.width / 2
        let r = width - radio
        for(let i = 0; i < num; i++){
          let deg = _.random(0,360)
          let x = r * Math.sin(deg) + r
          let y = r * Math.cos(deg) + r
          let xLoc,yLoc
          xLoc = (x - component.conAttr.left ) / MOBILE_WID_HEI.adaptiveScale
          yLoc = (y - component.conAttr.top) / MOBILE_WID_HEI.adaptiveScale
          path.push({
            x: xLoc,
            y: yLoc
          })
        }
        this.position.push(path)
        this.ball.push(dom)
      }
    })
    this.clickStart = this.clickStart.bind(this)
    this.stopFun = this.stopFun.bind(this)
    EventBus.$on("twistedEgg", this.clickStart);
  }
  clickStart(isPostWbEventOrCommonEvents){
    let ease = isHasOwnProperty(this.gsap, "ease") ? this.gsap.ease : 'none';
    let repeat = isHasOwnProperty(this.gsap, "repeat") ? this.gsap.repeat : 1;
    this.playAnim('.'+ this.className,1,ease, repeat,isPostWbEventOrCommonEvents)
  }
  playAnim(className, duration, ease,repeat,isPostWbEventOrCommonEvents) {
    let this_ = this
    let gsap = window.gsap;
    gsap.to(className, {
      ease,
      yoyo: true,
      repeat,
      duration,
      motionPath: {
        path: function(index){
          return this_.position[index]
        },
        autoRotate: false,
        curviness: 0,
      },
      onComplete: function() {
        this_.stopFun(isPostWbEventOrCommonEvents)
      }
    })
  }

  stopFun(isPostWbEventOrCommonEvents){
    gsap.to('.'+this.className, {
      x:0,
      y:0,
      onComplete: function() {
        isPostWbEventOrCommonEvents({ loadEvent: null, e: null })
      }
    })
  }
  destroy(){
    super.destroy();
    EventBus.$off("twistedEgg", this.clickStart);
    this.ball = null
  }
}
